<template>
  <div class="wrap">
    <Steps :current="2">
        <Step title="基础信息" content="这里是该步骤的描述信息"></Step>
        <Step title="线路配置" content="这里是该步骤的描述信息"></Step>
        <Step title="人员配置" content="这里是该步骤的描述信息"></Step>
    </Steps>
    <div class="content">
      <Row>
        <Col span="6">
          <div class="StepThreee-organization">
            <div class="content-top">组织结构</div>
            <div class="content-input">
              <Input suffix="ios-search" placeholder="输入关键字进行筛选" style="width: auto" />
            </div>
            <div class="content-lists">
              <div class="content-lists-item active" @click="handleOrganization(0)">
                <Icon type="md-arrow-dropright" /><span>博洽多闻安徽公司</span>
              </div>
              <div class="content-lists-item" @click="handleOrganization(1)">
                <Icon type="md-arrow-dropright" /><span>博洽多闻安徽公司</span>
              </div>
              <div class="content-lists-item" @click="handleOrganization(2)">
                <Icon type="md-arrow-dropright" /><span>博洽多闻安徽公司</span>
              </div>
            </div>

          </div>
        </Col>
        <Col span="9">
          <div class="StepThreee-users-list">
            <div class="content-top">用户列表</div>
            <div class="content-input">
              <Input v-model="searchUserInp.userName" placeholder="用户姓名" style="width: 30%" />
              <Input v-model="searchUserInp.userPhone" placeholder="手机号" style="width: 30%" />
              <Button type="primary" @click="searchUser">搜索</Button>
              <Button @click="searchReset">重置</Button>
            </div>
            <div class="content-table">
                <Table
                ref="selection"
                :columns="userColumns"
                :data="userlists"
                @on-selection-change='selectionChange'
                @on-select-all='selectionAll'
                >
                </Table>
                <Page :total="100" show-total @on-change="handlePage" />
            </div>
          </div>
        </Col>
        <Col span="1">
          <div class="StepThreee-arrows">
            <div class="arrows-box">
              <div class="content-arrow" @click="addSelected">
                <Icon type="md-arrow-forward" />
              </div>
            </div>
          </div>
        </Col>
        <Col span="8">
          <div class="StepThreee-selected">
            <div class="content-top">已选用户</div>
            <div class="content-table">
              <Table
              ref="selected"
              :columns="userColumns"
              :data="selectedUser"
              @on-selection-change='selectedChange'
              @on-select-all='selectedAll'
              >
              </Table>
            </div>
            <div class="content-btn">
              <Button type="error" @click="batchesDelete ">批量删除</Button>
              <Button @click="empty">清空</Button>
            </div>

          </div>
        </Col>
      </Row>
    </div>
    <div class="StepBtn">
      <Button type="primary" class="primary" @click="prev">上一步</Button>
      <Button type="primary" @click="next">提交</Button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['current'],
  data () {
    return {
      customerlist: {},
      searchUserInp: {
        userName: '',
        userPhone: ''
      },
      total: 100,
      pageSize: 10,
      userColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          className: 'table-column-name',
          width: 100
        },
        {
          title: '手机号',
          key: 'phone',
          className: 'table-column-phone',
          width: 160
        },
        {
          title: '所属部门',
          key: 'department',
          className: 'table-column-department'
        }
      ],
      userlists: [
        {
          id: 1,
          name: 'John Brown',
          phone: 18888888888,
          department: 'XXXXXX部门XXXXXX小组',
          date: '2016-10-03'
        },
        {
          id: 2,
          name: 'Jim Green',
          phone: 18888888888,
          department: 'XXXXXX部门XXXXXX小组',
          date: '2016-10-01'
        },
        {
          id: 3,
          name: 'Joe Black',
          phone: 18888888888,
          department: 'XXXXXX部门XXXXXX小组',
          date: '2016-10-02'
        },
        {
          id: 4,
          name: 'Jon Snow',
          phone: 18888888888,
          department: 'XXXXXX部门XXXXXX小组',
          date: '2016-10-04'
        },
        {
          id: 5,
          name: 'John Brown',
          phone: 18888888888,
          department: 'XXXXXX部门XXXXXX小组',
          date: '2016-10-03'
        },
        {
          id: 6,
          name: 'Jim Green',
          phone: 18888888888,
          department: 'XXXXXX部门XXXXXX小组',
          date: '2016-10-01'
        }
      ],
      select: [], // 用户列表选中暂存
      selected: [], // 已选用户选中暂存
      selectedUser: []
    }
  },
  methods: {
    // 点击组织架构列表
    handleOrganization (i) {
      var lists = document.querySelectorAll('.content-lists-item')
      lists.forEach(item => {
        console.log(item)
        item.classList.remove('active')
      })
      lists[i].classList.add('active')
      console.log(lists)
    },
    // 用户列表搜索
    searchUser () {
      console.log(this.searchUserInp.userName)
      console.log(this.searchUserInp.userPhone)
    },
    // 用户列表搜索重置
    searchReset () {
      this.searchUserInp.userName = ''
      this.searchUserInp.UserPhone = ''
    },
    // 点击选框
    selectionChange (selection) {
      console.log('111')
      this.select = []
      this.select = selection
    },
    // 点击全选
    selectionAll (selection) {
      this.select = []
      this.select = selection
    },
    // 切换页码
    handlePage (page) {
      console.log(page)
    },
    // 添加到已选用户
    addSelected () {
      console.log(this.select)
      for (let i = 0; i < this.selectedUser.length; i++) {
        for (let j = 0; j < this.select.length; j++) {
          if (this.selectedUser[i].id == this.select[j].id) {
            this.select.splice(j, 1)
            this.$Message.info('请勿重复添加')
          }
        }
      }
      this.selectedUser = [
        ...this.selectedUser,
        ...this.select
      ]
      this.$refs.selection.selectAll(false)
      this.select = []
    },
    // 已选用户选框
    selectedChange (selection) {
      console.log('222')
      this.selected = selection
    },
    // 已选用户全选
    selectedAll () {

    },
    // 批量删除
    batchesDelete () {
      for (let i = 0; i < this.selectedUser.length; i++) {
        for (let j = 0; j < this.selected.length; j++) {
          if (this.selectedUser[i].id == this.selected[j].id) {
            this.selectedUser.splice(i, 1)
          }
        }
      }
    },
    // 清空
    empty () {
      this.selectedUser = []
    },
    prev () {
      this.$router.push({ path: '/StepTwo' })
    },
    // 下一步
    next () {
      console.log("提交")
    },
  }
}
</script>

<style lang="less">
  @import '../assets/style/stepThree/StepThree';
</style>
